<template>
  <section>
    <area-layout @TreeSelect="handlerTreeSelect">
      <template slot="title">
        <span class="title">
          {{ $route.meta.title }}
        </span>
        <a-button-group class="button-group">
          <span class="button-group-title">批量建库:</span>
          <a-popconfirm
            title="您确认要导入上一年数据到本年度?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handlerSyncData"
          >
            <a-button
              type="link"
              style="margin-right: 20px"
              :loading="syncLoading"
              :auth="{
                keys: [
                  isLarge ? 'large-member.sync-last-year' : 'member.sync-last-year',
                  !(!currentAreaId),
                ],
                relate: 'and',
              }"
              >导入上一年数据</a-button
            >
            <!-- || currentUserArea.s_a_id.length !== 6 -->
          </a-popconfirm>
        </a-button-group>
        <template v-if="!isLarge">
          <!-- <a-button-group class="button-group">
            <span class="button-group-title">一卡通账户:</span>
            <a-button
              type="link"
              :auth="{
                keys: ['member.import-ykt',!!currentAreaId],
                relate: 'and'
              }"
              :loading="syncLoading"
              @click="$refs.MemberYKTAccountImport.handlerUploadExecl()"
              >导入</a-button
            >
            <a-button
              type="link"
              :loading="syncLoading"
              @click="handlerDownload($downloadRoot + '耕保补贴一卡通账号明细表.xls')"
              >[模板]</a-button
            >
            <a-button
              style="margin-right: 10px"
              type="link"
              :auth="{
                keys: ['member.import-ykt', !!currentAreaId],
                relate: 'and'
              }"
              showDefaultLabel
              @click="handlerUploadProcess('farmmer_account', '导入一卡通账号')"
            >
              [查看]
            </a-button>
          </a-button-group> -->
          <a-button-group>
            <!-- <a-button
              type="primary"
              icon="cloud-upload"
              disabled
              @click="$refs.MemberImport.handlerUploadExecl(true)"
            >
              从单机版农户信息表导入
            </a-button>
            <a-button
              icon="download"
              disabled
              @click="handlerDownload($downloadUrl)"
            >
            下载模板
            </a-button> -->
            <!-- <a-button
              type="primary"
              style="margin-right: 10px"
              showDefaultLabel
              @click="handlerUploadProcess('member', '单机版农户信息')"
            >
              查看上传进度
            </a-button> -->
          </a-button-group>

          <a-button-group>
            <!-- <a-button
              type="primary"
              icon="cloud-upload"
              disabled
              @click="$refs.GrainImport.handlerUploadExecl()"
            >导入单机版补贴面积数据</a-button>
            <a-button
              type="default"
              icon="download"
              disabled
              @click="handlerDownload($downloadGrainsUrl)"
            >
              下载模板
            </a-button> -->
            <!-- <a-button
              type="primary"
              style="margin-right: 10px"
              showDefaultLabel
              @click="handlerUploadProcess('field', '单机版补贴面积')"
            >
              查看单机版补贴面积上传入库进度
            </a-button> -->
          </a-button-group>
        </template>

        <template v-else>
          <a-button-group>
            <!-- <a-button
              type="primary"
              icon="cloud-upload"
              disabled
              @click="$refs.LargeGrainImport.handlerUploadExecl()"
            >导入种粮大户申报信息</a-button>
            <a-button
              type="default"
              icon="download"
              disabled
              @click="handlerDownload($downloadLargeMemberTemplate)"
            >
              下载申报信息模板
            </a-button> -->
            <!-- <a-button
              type="primary"
              style="margin-right: 10px"
              :disabled="!currentAreaId"
              showDefaultLabel
              @click="handlerUploadProcess('big_member', '单机版申报信息')"
            >
              查看上传入库进度
            </a-button> -->
          </a-button-group>

          <!-- <a-button-group class="button-group">
            <span class="button-group-title">一卡通账号:</span>
            <a-button
              type="link"
              :auth="{
                keys: ['large-member.import-ykt', !!currentAreaId],
                relate: 'and',
              }"
              :loading="syncLoading"
              @click="handlerImportYKT"
              >导入一卡通账号</a-button
            >
            <a-button
              type="link"
              :loading="syncLoading"
              @click="
                $downloadTemplate('大户耕保补贴一卡通账号明细表模板.xls')
              "
              >[模板]</a-button
            >
            <a-button
              style="margin-right: 10px"
              :auth="{
                keys: ['large-member.import-ykt', !!currentAreaId],
                relate: 'and',
              }"
              type="link"
              showDefaultLabel
              @click="
                handlerUploadProcess('abig_account', '导入一卡通账号')
              "
            >
              [查看]
            </a-button>
          </a-button-group> -->
        </template>

        <a-button type="link" icon="question-circle" @click="handlerHelper">
          帮助
        </a-button>
      </template>

      <template slot-scope="row">
        <template v-if="row.currentAreaId">
          <section class="roster-container">
            <!-- 模式切换 -->
            <section class="mode-select" v-if="row.currentAreaId.length">
              显示模式：
              <a-radio-group v-model="currentMode">
                <a-radio value="1"> 统计表 </a-radio>
                <a-radio value="2"> 明细表 </a-radio>
              </a-radio-group>
            </section>

            <Statistics
              :currentAreaId="row.currentAreaId"
              v-if="currentMode === '1'"
            />
            <template v-else>
              <LargeMembers v-if="isLarge" :currentAreaId="row.currentAreaId" />
              <template v-else>
                <MemberList :currentAreaId="row.currentAreaId" />
              </template>
            </template>
          </section>
        </template>
      </template>
    </area-layout>

    <MemberImport ref="MemberImport" />
    <MemberYKTAccountImport ref="MemberYKTAccountImport" :currentAreaId="currentAreaId" />
    <GrainImport ref="GrainImport" />
    <LargeGrainImport ref="LargeGrainImport" />
  </section>
</template>

<script lang="ts">
// 演示如何使用 this.$dialog 封装 modal 组件
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'

import AreaTree from '@/components/src/AreaTree'
import AreaLayout from '@/layouts/AreaLayout.vue'
import MemberList from './MemberList.vue'
import LargeMembers from '../large-grain/Grain.vue'
import Statistics from './Statistics.vue'
import { userModule } from '@/store/modules/user'
import Family from '../list/Family.vue'
import MemberImport from '../list/MemberImport.vue'
import MemberYKTAccountImport from './MemberYKTAccountImport.vue'
import GrainImport from '../grain/GrainImport.vue'
import LargeGrainImport from '../large-grain/LargeImport.vue'
import UploadProcess from '../../fund-release/list/UploadProcess.vue'
import { famerServices } from '@/common/services/famer'

import {
  handlerImport
} from '@/components/src/ImportExecl'
import { largeMemberServices } from '@/common/services/largeMember'

@Component({
  components: {
    AreaTree,
    AreaLayout,
    MemberList,
    Statistics,
    Family,
    LargeMembers,
    MemberImport,
    GrainImport,
    LargeGrainImport,
    UploadProcess,
    MemberYKTAccountImport
  },
})
export default class Farmers extends Mixins(EventsMixin) {
  public $refs: any

  public data = []
  public currentAreaId = ''
  public currentMode = '1'

  get isLarge() {
    return userModule.isLarge
  }
  get currentUserArea() {
    return userModule.currentUserArea
  }

  public handlerTreeSelect(data: any) {
    // 社级直接默认明细
    if (data.s_a_id.length === 14) {
      this.currentMode = '2'
    } else {
      // this.currentMode = '1'
    }
    this.currentAreaId = data.s_a_id
  }

  public handlerHelper() {
    this.events.trigger('show-helper')
  }

  public handlerUploadExecl() {
    console.log('refs', this)
    this.$refs.MemberImport.handlerUploadExecl(true)
  }

  // 下载
  public handlerDownload(link: string) {
    const a = document.createElement('a')
    a.href = link
    a.target = '_blank'
    a.click()
  }

  // 同步上一年数据
  public syncLoading = false
  public handlerSyncData() {
    const loading = this.$message.loading({
      content: '数据正在同步中。。。请稍后',
    })
    this.syncLoading = true
    let api = this.isLarge ? largeMemberServices.syncLastYearData : famerServices.syncLastYearData
    api({
        s_a_id: this.currentAreaId,
      })
      .then((_) => {
        this.$message.success('同步成功')
      })
      .finally(() => {
        loading()
        this.syncLoading = false
      })
  }

  public handlerUploadProcess(type: string, title: string) {
    this.$dialog(
      UploadProcess,
      {
        currentAreaId: this.currentAreaId,
        type,
      },
      {
        title: '查询' + title + '上传进度',
        width: 1000,
      }
    )
  }

  public handlerImportYKT() {
    handlerImport({
      member_id: '大户编号',
      member_nam: '大户姓名',
      member_sfz: '身份证号',
      member_bank_num: '一卡通号',
      member_bank_code: '开户行名'
    }, largeMemberServices.importFieldExecl, {
      title: '大户一卡通信息导入预览表'
    }, {
      s_a_id: this.currentAreaId
    })
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.member-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.roster-container {
  // position: relative;
}
.mode-select {
  position: absolute;
  right: 20px;
  top: 16px;
  z-index: 33;
}
.title {
  margin-right: 70px;
}

.button-group {
  align-items: center;
  .button-group-title {
    font-size: 14px;
    display: inline-block;
    line-height: 32px;
  }
}

</style>
